<template>
	<view class="follow_card">
		<!-- 内容 -->
		<view class="card_content">
			<u--image :showLoading="true" :src="baseUrl+props.data.header" width="100px" height="100px"></u--image>
			<view class="user_info">
				<text style="color: #000;">{{props.data.nickname}}</text>
				<text>{{formatAge(props.data.birth)}}岁 | {{props.data.cur_city}} | {{props.data.education}} | {{props.data.profession}} | {{props.data.height}}cm</text>
				<text>于{{props.data.add_time}}关注</text>
			</view>
		</view>
		<!-- 送礼/聊天 -->
		<view class="giv_gift">
			<view class="gift">
				<u-icon name="gift" color="#f3706e" size="28"></u-icon>
				<text>送礼物</text>
			</view>
			<view>
				<u-icon name="email"  size="28"></u-icon>
				<text>聊聊天</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { baseUrl } from "../../utils/request";
	const props=defineProps({
		data:{ 
			type:Object,
			default:()=>{}
		}
	}) 
	function formatAge(birthday){
		//出生时间 毫秒
		var birthDayTime = new Date(birthday).getTime(); 
		//当前时间 毫秒
		var nowTime = new Date().getTime(); 
		//一年毫秒数(365 * 86400000 = 31536000000)
		return Math.ceil((nowTime-birthDayTime)/31536000000);
	}
</script>

<style lang="scss">
.follow_card{
	width: 100%;
	background: #fff;
	padding: 10rpx 0;
	color: #818082;
	margin-top: 10rpx;
	.card_content{
		display: flex;
		padding: 20rpx;
		border-top: 1px solid #f9f9f9;
		border-bottom: 1px solid #f9f9f9;
		.user_info{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 20rpx;
		}
	}
	.giv_gift{
		display: flex;
		justify-content: space-evenly;
		padding: 10rpx 20rpx;
		view{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.gift text{
			color: #ccc;
		}
	}
}
</style>